<script src="../../../Desktop/server/server.js"></script>
<template>

    <div class="my_Content">

        <mt-header style="background-color: #CCCC99;height:2.5em;" fixed title="" class="header">
            <mt-button @click="toLogin" slot="right">
                <div id="longin_"style="margin-top:8px;color:#ffffff;" v-show="btn">登录>></div>

            </mt-button>
            <mt-button @click="logout" slot="right">
                <div ref="logout_"style="margin-top:8px;color:#ffffff;" v-show="!btn">注销>></div>

            </mt-button>
        </mt-header>

        <div class="box1">

            <div class=box2>

                <div id="circle">
                        <img src="../assets/touxiang.jpg">
                </div>

                <div id="user" class="user">

                    <p>用户名：{{username}}</p>

                    <p>学号：{{sid}}</p>

                </div>

            </div>

            <div class="box3">

                <mt-button v-on:click="goMy_1()">我的书架</mt-button>
                <mt-button v-on:click="goMy_2()">借阅历史</mt-button>
                <mt-button v-on:click="goMy_3()">续借申请</mt-button>
                <router-view></router-view>

            </div>


        </div>


    </div>
</template>
<script>
import  {mapState} from "vuex"

    export default{
        data(){
            return {
                sid: '',
                username: ''
            }
        },
        computed: {
            ...mapState({
                btn:state =>state.btn
            })
        },

        mounted(){
            this.getUser();

        },
        methods: {

            getUser(){
                var _this = this;
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        _this.sid = ''
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        console.log('已登录')
                        console.log(res.data);
                        _this.username = res.data.username;
                        _this.sid = res.data.sid
                        console.log(_this.username);
                        console.log(_this.sid);

                    }
                })
                /*if($refs.logout_.style.display=="block"){
                        console.log(123456);
                }*/
            },
            logout(){
                var _this = this;
                _this.$http.post('/users/logout').then(function (res) {
                    if (res.data.result == 0) {
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        _this.username = '';
                        _this.sid = ''
                        _this.$router.push('/login/login');
                    }
                })
            },

        toRegistr: function () {
            this.$router.push('/login/registr')
        },
        toLogin: function () {
            this.$router.push('/login/login')
        },
        goMy_1: function () {
            this.$router.push('/my/my_1')
        },
        goMy_2: function () {
            this.$router.push('/my/my_2')
        },
        goMy_3: function () {
            this.$router.push('/my/my_3')
        },

    }

    }
</script>
<style>
    .my_Content {
        background-color: #ffffff;
        height: auto;
        padding-top: 10%;
        padding-bottom: 200%;
        margin-bottom: -18%;
    }

    .boxR {
        background-color: black;
        width: 20%;
        margin-top: 5%;
        margin-left: 77%;
        text-align: center;

    }

    .boxa {
        color: #99CC66;
        margin-left: 1%;

    }

    .box1 {
        width: 100%;
        height: 200px;
        margin: 0 auto;

    }

    .box2 {
        background-color: #ffffff;
        width: auto;
        height: 70%;
        margin-top: 3%;

    }


    #circle img{
        width:30%;
        height:auto;
        float: left;
        margin-left: 6%;
        margin-top: 4%;
        border: 2px solid;
        border-radius:50%;
    }

    .user {
        width: 50%;
        height: 100%;
        float: right;
        margin-left: 20%;
        margin-top: -30%;

    }

    .user p {
        font-size: 110%;
        font-family: 黑体;
        font-weight: bold;
        margin-top: 15%;
        margin-left: -8%;
        text-align: left;

    }

    .box3 {
        height: 30%;
        width: auto;
        margin-top:4%;
        border-radius: 10px;

    }

    .box3 button {

        width: 33.3%;
        height: 100%;
        float: left;
        background-color: #66512c;
        border: 1px solid #CCCC99;
        font-family: 华文楷体;
        border-radius:15px;
        font-size: 140%;
        line-height: 250%;
        color: #CCCC99;
        opacity: 0.7;

    }

</style>
